<template>
  <div v-show="show.showUpload" class="commonUpload">
    <div class="header">
      <p>文件总数</p>
      <div class="operate">
        <el-icon style="cursor: pointer;margin-right: 10px" @click="close">
          <Close/>
        </el-icon>
        <el-icon style="cursor: pointer;" @click="scale">
          <Minus/>
        </el-icon>
      </div>
    </div>
    <div class="content" :style="{height:show.showScale?'400px':'0'}">
      <el-scrollbar></el-scrollbar>
    </div>
  </div>
</template>

<script>
import { onBeforeMount, reactive, ref } from 'vue'
import { emitter } from '@/utils/util'
import { BEGIN_FILE_UPLOAD } from '@/utils/eventBusName'
import { post } from '@/utils/httpRequest'
import { generateUploadIdUrl, partUploadUrl } from '@/api/api'
import SparkMD5 from 'spark-md5'

export default {
  name: 'upload',
  setup () {
    const show = reactive({
      showUpload: false,
      showScale: true
    })
    const scale = () => {
      show.showScale = !show.showScale
    }
    const close = () => {
      show.showUpload = false
    }
    const partUpload = async (uploadId, file, chunkTotal, currentChunk, chunkSize, Spark) => {
      if (currentChunk < chunkTotal) {
        const sliceFile = file.slice(currentChunk * chunkSize, (currentChunk + 1) * chunkSize)
        const fileReader = new FileReader()
        const sparkLocal = new SparkMD5.ArrayBuffer()
        let md5
        fileReader.readAsArrayBuffer(sliceFile)
        fileReader.onload = async (e) => {
          sparkLocal.append(e.target.result)
          Spark.append(e.target.result)
          md5 = sparkLocal.end()
          console.log(md5)
          debugger
          const formData = new FormData()
          formData.append('file', sliceFile)
          formData.append('generateUploadId', uploadId)
          formData.append('chunkTotal', chunkTotal)
          formData.append('currentChunk', currentChunk)
          formData.append('md5', md5)
          // 最后一片的时候，构造最终的数据
          if (currentChunk + 1 === chunkTotal) {
            formData.append('finalMd5', Spark.end())
            formData.append('contentType', file.type)
            formData.append('originFileName', file.name)
          }
          const result = await post(partUploadUrl, formData)
          if (result.code === 200) {
            await partUpload(uploadId, file, chunkTotal, currentChunk + 1, chunkSize, Spark)
          }
        }
      } else {
        console.log(1)
        // const md5 = spark.end()
        // console.log('md5', md5)
      }
    }
    const sliceUpload = async (file) => {
      // 文件总的md5
      const Spark = new SparkMD5.ArrayBuffer()
      const result0 = await post(generateUploadIdUrl, {})
      let uploadId = null
      if (result0.code === 200) {
        uploadId = result0.data
      }
      console.log(file)
      // 文件大小
      const fileSize = file.size
      // 切片大小 1K
      const chunkSize = 1024 * 1024
      // 切片总数
      const chunkTotal = Math.ceil(fileSize / chunkSize)
      console.log('切片总数', chunkTotal)
      await partUpload(uploadId, file, chunkTotal, 0, chunkSize, Spark)
    }
    onBeforeMount(() => {
      // 上传队列
      const queue = ref([])
      // 监控文件上传
      emitter.on(BEGIN_FILE_UPLOAD, (payload) => {
        show.value = true
        queue.value.push(payload)
        // sliceUpload(queue.value[0].file[0])
      })
    })
    return {
      show,
      scale,
      close,
      sliceUpload
    }
  }
}
</script>

<style scoped lang="less">
.commonUpload {
  position: fixed;
  width: 400px;
  bottom: 0;
  right: 0;
  border: 1px solid var(--el-border-color);
  z-index: 99999;
  background: #fff;
  box-shadow: var(--el-box-shadow-lighter);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--el-border-color);
    height: 40px;
    padding: 0 10px;
  }

  .content {
    transition: height 0.8s;
  }
}
</style>
